<template>

  <div>

    <div id="page">
      <!--<nav class="gtco-nav" role="navigation">-->
      <!--<div class="gtco-container">-->
      <!--<div class="row">-->
      <!--<div class="col-md-12 text-right gtco-contact">-->
      <!--<ul class="">-->
      <!--<li><a href="#"><i class="ti-mobile"></i> 010-56212504</a></li>-->
      <!--&lt;!&ndash;<li><a href="http://twitter.com/gettemplatesco"><i class="ti-twitter-alt"></i> </a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="#"><i class="icon-mail2"></i></a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="#"><i class="ti-facebook"></i></a></li>&ndash;&gt;-->
      <!--</ul>-->
      <!--</div>-->
      <!--</div>-->
      <!--<div class="row">-->
      <!--<div class="col-sm-4 col-xs-12">-->
      <!--<div id="gtco-logo"><img src="static/img/pngicon64.png" alt=""><a href="/">四季无边</a></div>-->
      <!--</div>-->
      <!--<div class="col-xs-8 text-right menu-1">-->
      <!--<ul>-->
      <!--<li>-->
      <!--<a href="/">网站首页</a>-->
      <!--</li>-->
      <!--<li class="active">-->
      <!--<a href="#/products">产品中心</a>-->
      <!--</li>-->
      <!--<li class="">-->
      <!--<a href="#/information">公司资讯</a>-->
      <!--</li>-->
      <!--&lt;!&ndash;<li class="has-dropdown">&ndash;&gt;-->
      <!--&lt;!&ndash;<a href="#">Dropdown</a>&ndash;&gt;-->
      <!--&lt;!&ndash;<ul class="dropdown">&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="#">HTML5</a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="#">CSS3</a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="#">Sass</a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;<li><a href="#">jQuery</a></li>&ndash;&gt;-->
      <!--&lt;!&ndash;</ul>&ndash;&gt;-->
      <!--&lt;!&ndash;</li>&ndash;&gt;-->
      <!--<li><a href="#/add">加入我们</a></li>-->
      <!--<li><a href="#/to">关于</a></li>-->
      <!--</ul>-->
      <!--</div>-->
      <!--</div>-->

      <!--</div>-->
      <!--</nav>-->

      <header id="gtco-header" class="gtco-cover gtco-cover-xs" role="banner"
              style="background-image:url(static/images/img_bg_1.jpg);">
        <div class="overlay"></div>
        <div class="gtco-container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center">
              <div class="display-t">
                <div class="display-tc">
                  <h1 id="ac" name="1" class="animate-box fadeInUp animated-fast" data-animate-effect="fadeInUp">产品中心</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>


    </div>


    <div class="gtco-section border-bottom">
      <div class="gtco-container">
        <div class="row  fadeInUp animated-fast">
          <div class="col-md-8 col-md-offset-2 text-center gtco-heading">
            <h2>游戏下载</h2>
          </div>
        </div>
        <div class="row">

          <div class="banner-bottom-3grds">
            <div class="container">
              <div class="banner-bottom-3grids">
                <div class="col-md-4 banner-bottom-3grid">
                  <div class="banner-bottom-3grd text-left">
                    <img src="static/img/re.jpg" alt="创世战机" class="img-responsive">
                    <br>
                    <h3>创世战机</h3>
                    <p>【游戏类别】：射击游戏</p>
                    <p>【游戏平台】：手机游戏</p>
                    <p>【游戏语言】：简体中文</p>
                    <p>【系统】： Android2.2及以上</p>
                    <br>
                    <p>【游戏简介】</p>
                    <p class="pad">
                      五星级平面射击游戏！游戏全程节奏紧凑，难度由易到难，除了种种的狠角色会不断出现之外， 在关卡尽头都还会有一个把关的巨型头目，因此玩家必须尽量取得像是激光、追踪飞弹等强力武器，才能够顺利过关斩将。 如果你是喜欢射击游戏的玩家，一定不要错过它。</p>
                    <div class="more m1 text-center">
                      <a href="1.apk"><input type="submit" value="下载游戏" class="btn btn-primary "></a>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 banner-bottom-3grid">
                  <div class="banner-bottom-3grd text-left">
                    <img src="static/img/re1.jpg" alt=" " class="img-responsive">
                    <br>
                    <h3>血战太平洋</h3>
                    <p>【游戏类别】：塔防益智</p>
                    <p>【游戏平台】：手机游戏</p>
                    <p>【游戏语言】：简体中文</p>
                    <p>【系统】： Android2.2及以上</p>
                    <br>
                    <p>【游戏简介】</p>
                    <p class="pad">
                      《血战太平洋》是一个老手和菜鸟都同样会喜欢的塔防游戏。敌人来势汹汹，你需要建造火力强大的防卫塔来保护你的基地。 精美的游戏场景，炫目的特效，动感的音乐，易上手的操作及极高的游戏性，这些都可以在游戏中感受到。</p>
                    <div class="more m1 text-center">
                      <a href="2.apk"><input type="submit" value="下载游戏" class="btn btn-primary "></a>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 banner-bottom-3grid text-left">
                  <div class="banner-bottom-3grd">
                    <img src="static/img/re2.jpg" alt=" " class="img-responsive">
                    <br>
                    <h3>僵尸前线</h3>
                    <p>【游戏类别】：射击游戏</p>
                    <p>【游戏平台】：手机游戏</p>
                    <p>【游戏语言】：简体中文</p>
                    <p>【系统】： Android2.2及以上</p>
                    <br>
                    <p>【游戏简介】</p>
                    <p class="pad">
                      在这个已经被僵尸包围和吞噬的世界中，你是幸存者之一。在寻找存活出路的旅途中，你会遇到形形色色的幸存同胞， 而选择是否帮助他们或者接受他们的帮助将决定剧情的走向，也突出了游戏的主旨——即便世界将要毁灭，人性依然存在。</p>
                    <div class="more m1 text-center">
                      <a href="3.apk"><input type="submit" value="下载游戏" class="btn btn-primary "></a>
                    </div>
                  </div>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>


    <div id="gtco-portfolio" class="gtco-section">
      <div class="gtco-container">

        <div class="row row-pb-md">


          <div class="col-md-12">
            <ul id="gtco-portfolio-list">
              <li class="two-third" data-animate-effect="fadeIn"
                  style="background-image: url(static/img/1.jpg); ">
                <a href="http://sijiwb.com/jjj.html" class="color-1">
                  <div class="case-studies-summary">
                    <h2>新鸡毛信</h2>
                    <p style="color: #fff;">新鸡毛信以抗日战争为历史背景，将艰苦卓绝的抗日战争淋漓尽致的呈现在用户面前。</p>
                  </div>
                </a>
              </li>
              <li class="one-third" data-animate-effect="fadeIn"
                  style="background-image: url(static/img/vvv.jpg); ">
                <a href="5.apk" class="color-4">
                  <div class="case-studies-summary">
                    <h2>鲤鱼悦漫</h2>
                    <p style="color: #fff;">
                      《鲤鱼悦漫》最受欢迎的漫画应用,正版高清漫画平台,连载众多正版授权及原创精品漫画内容！我们致力于为作者建造良好的创作环境,为广大漫画爱好者提供更多优质的漫画内容。</p>
                  </div>
                </a>
              </li>

            </ul>
          </div>
        </div>


      </div>
    </div>




    <div id="gtco-counter" class="gtco-section animated border-bottom">
      <div class="gtco-container">

        <div class="row">
          <div class="col-md-8 col-md-offset-2 text-center gtco-heading animate-box fadeInUp animated-fast">
            <h2>健康忠告</h2>
            <p>抵制不良游戏　拒绝盗版游戏</p>
            <p>注意自我保护　谨防受骗上当</p>
            <p>适度游戏益脑　沉迷游戏伤身</p>
            <p>合理安排时间　享受健康生活</p>
          </div>
        </div>
      </div>
    </div>


  </div>


</template>

<script>
  export default {
    name: 'main',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      load: function () {
        if (location.search.indexOf('?') === -1) {
          location.href += '?myurl'
        } else {
          if (location.search.indexOf('myurl') === -1) location.href += '&myurl'
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body {
    overflow-x: -webkit-paged-y;
  }

  hr {
    color: #bbb;
  }

  h1, h2 {
    font-weight: normal;
  }

  ul.partnerQY {
    list-style-type: none;
    padding: 0;
  }

  .partnerQY li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  div.li {
    padding-top: 84px;
    padding-bottom: 84px;
    border-bottom: 1px solid #bbb;
  }

  .li img {
    display: inline-block;
    display: -webkit-inline-box;
  }

  .li h4 {
    color: #5895f1;
    font-size: 24px;
    line-height: 1;
    margin-top: 48px;
  }

  .li p {
    font-size: 18px;
    line-height: 26px;
  }

  div.end {
    border-bottom: none;
  }

  .hed {
    margin-top: 5rem;
  }

  .hed h3 {
    font-size: 24px;
    color: #000;
  }

  .hed p {
    font-size: 18px;
    color: #aaa;
  }

  .advList {
    overflow: hidden;
    display: inline-block;
    margin: 0 auto;
  }

  .advList li {
    margin: 2em 2em;
    cursor: pointer;
    border-radius: 8px;
    float: left;
    min-width: 200px;
    height: 260px;
    background: #f2f2f2;
    transition: all .6s;
  }

  .advList li:hover {
    transform: scale(1.1);
    box-shadow: 0px 5px 8.6px 1.4px rgba(67, 67, 67, 0.3);
  }

  .advList li img {
    padding: 22px 0;
    display: inline-block;
    margin: 0 auto;
  }

  .advList li h4 {
    font-size: 20px;
    font-weight: 600;
  }

  .advList li p {
    font-size: 16px;
    line-height: 20px;
  }

  .partnerQY {
    overflow: hidden;
  }

  .partnerQY img {
    width: 100%;
  }

  .partnerQY li {
    margin: 20px 0px;
    padding: 16px 20px;
  }

  .partnerQY li:hover {
    cursor: pointer;
    box-shadow: 5px 5px 8px rgba(67, 67, 67, 0.3) inset, -5px -5px 8px rgba(67, 67, 67, 0.3) inset;
  }

  .partnerQY li img {
    display: inline-block;
    margin: 0 auto;
  }

  .pad{
    padding:0px 10px;
  }

</style>
